<template>
  <div class="footer" ref="footMini">
    <div class="footWrap">
      <router-link to="/index" tag="div" exact class="menuMi">
        <div>
          <i class="iconfont">&#xe614;</i>
        </div>首页
      </router-link>
      <router-link to="/community" tag="div" class="menuMi">
        <div>
          <i class="iconfont">&#xe60d;</i>
        </div>社区
      </router-link>

      <div class="menuMi sendArt" @click="sendBlog">
        <div>
          <div class="sendArtWrap">
            <i class="iconfont">&#xe608;</i>
          </div>
        </div>
      </div>
      <div class="menuMi">
        <div>
          <i class="iconfont">&#xe722;</i>
        </div>问答
      </div>
      <div class="menuMi">
        <div>
          <i class="iconfont">&#xe688;</i>
        </div>更多
      </div>
    </div>
  </div>
</template>

<script>
import { getDirection } from "../common/loginUtil";
export default {
  data() {
    return {
      startx: 0,
      starty: 0
    };
  },
  created() {},
  mounted() {
    document.addEventListener(
      "touchstart",
      e => {
        this.startx = e.touches[0].pageX;
        this.starty = e.touches[0].pageY;
      },
      false
    );
    document.addEventListener(
      "touchend",
      e => {
        var endx, endy;
        endx = e.changedTouches[0].pageX;
        endy = e.changedTouches[0].pageY;
        var direction = getDirection(this.startx, this.starty, endx, endy);
        switch (direction) {
          case 0:
            break;
          case 1:
            // 上滑动\
            if (this.$refs.footMini == null) {
              return;
            }
            this.$refs.footMini.style.transform = "translateY(50px)";

            break;
          case 2:
            if (this.$refs.footMini == null) {
              return;
            }
            this.$refs.footMini.style.transform = "translateY(0)";
            break;
          case 3:
            console.log("left");

            break;
          case 4:
            console.log("right");
            break;
          default:
        }
      },
      false
    );
  },
  methods: {
    clientXY() {
      if (window.innerHeight !== undefined) {
        return {
          width: window.innerWidth,
          height: window.innerHeight
        };
      } else if (document.compatMode === "CSS1Compat") {
        return {
          width: document.documentElement.clientWidth,
          height: document.documentElement.clientHeight
        };
      } else {
        return {
          width: document.body.clientWidth,
          height: document.body.clientHeight
        };
      }
    },
    sendBlog() {
      this.$router.push({
        name: "sendblog",
        params: {
          uid: window.localStorage.getItem("uid")
        }
      });
    }
  }
};
</script>

<style lang='scss'>
@media screen and(max-width: 500px) {
  .footer {
    display: block !important;
  }
}
.footer {
  position: fixed;
  display: none;
  bottom: -1px;
  width: 100%;
  background-color: #fafafa;
  box-shadow: 0 -1px rgba(0, 0, 0, 0.1), 0 -2px 10px rgba(0, 0, 0, 0.1);
  .footWrap {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    font-size: 12px;
    .menuMi {
      flex: 1;
      height: 49px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      div {
        margin-bottom: 5px;
      }
    }
    .sendArt {
      div {
        width: 46px;
        height: 34px;
        background: #009a61;
        border-radius: 6px;
        line-height: 46px;
        text-align: center;
        position: relative;
        i {
          display: inline-block;
          position: absolute;
          left: 12px;
          top: -6px;
          color: white;
          font-size: 18px;
        }
      }
    }
  }
}
</style>